<template>
  <el-container style="height: 100%">
    <el-aside :width="isExpand?'':'230px'" class="left-wrap" v-if="isShowMenu && menu.length">
      <el-menu class="menu-wrap" :collapse="isExpand" @select="selectMenu" :default-active="activeName">
        <c-menu :menu-data="menu" :activeName="activeName" :collapse="isExpand"></c-menu>
      </el-menu>
<!--      <div class="menu-bottom">
        <div class="menu-fold">
          <i class="el-icon-s-unfold fold-icon" :class="{'toggle-fold':isExpand}" @click="toggleMenu"></i>
        </div>
      </div>-->
    </el-aside>
    <el-container>
      <div class="sub-main-container">
        <div class="container-top" v-if="isShowMenu">
          <span class="location-tag">
            <span>{{app.appName}}</span>
            <template  v-for="(b,index) in openMenu">
              <span :key="b.id+'-icon'" v-if="index !== openMenu.length">
                <i class="el-icon-arrow-right"></i>
              </span>
              <span :key="b.id+'-tag'" :class="{'last-item':index===openMenu.length-1}">{{b.resourceName}}</span>
            </template>
          </span>
        </div>
        <div class="main-block">
            <slot></slot>
        </div>
        <div class="footer">
          <span>{{ oem.copyName }}</span>
        </div>
      </div>
    </el-container>
  </el-container>
</template>

<script>
import mixins from '../../mixins'
import CMenu from './c-menu'
export default {
  name: 'container-menu',
  components: { CMenu },
  mixins: [mixins()],
  props: {
    isShowMenu: Boolean,
    menu: Array,
    isSubApp: Boolean,
    openMenu: Array,
    activeName: String,
    defaultIsExpand: Boolean
  },
  data () {
    return {
    }
  },
  computed: {
    isExpand () {
      return this.$store.state.base.isExpand
    }
  },
  methods: {
    selectMenu (index) {
      this.$emit('selectMenu', index)
    },
    toggleMenu () {
      this.$store.commit('setExpand', !this.isExpand)
    }
  }
}
</script>

<style scoped lang="scss">
  .left-wrap{
    background: $menu-bg-color;
  }
  .left-wrap{
    display: flex;
    flex-direction: column;
    box-shadow: 2px 6px 2px 0px rgba(27, 49, 107, 0.23);
    .menu-wrap{
      flex: 1 1 auto;
      overflow: auto;
      border-right: none;
      background: $menu-bg-color;
    }
    .menu-bottom{
      padding: 0 24px;
      flex: 0 0 auto;
      .menu-fold{
        padding: 10px 0;
        text-align: right;
        .fold-icon{
          cursor: pointer;
          font-size: 18px;
          color: $--color-white;

          &.toggle-fold{
            transform: rotate(180deg);
          }
        }
      }
    }
  }
  .sub-main-container{
    width: 100%;
    .container-top{
      height: 32px;
      padding-left: 18px;
      display: flex;
      align-items: center;

      .location-tag{
        font-size: 14px;
        line-height: 1;
        font-weight: normal;
        color: #878787;

        .last-item{
          color: $--color-primary ;
        }
      }
    }
    .main-block{
      height: calc(100% - 60px);
    }
    .footer{
      position: fixed;
      left: 50%;
      bottom: -5px;
      transform: translate(-50%, -50%);
      font-size: 12px;
      color: $--color-info;
    }
  }

</style>
